<template>
    <div class="content">
        <div id="chartV" class="logo"></div>
        <div id="chartTwoV" class="logo"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        mounted() {
            let myThis = this;
            this.$nextTick(() => {
                // 在这里可以安全地访问或操作更新后的 DOM  
                myThis.fillChartV();
                //  实现多项数据标注
                myThis.fillChartFZV();
            });
        },
        methods: {
            //
            fillChartV() {
                let colorArr = ["#4473FF", "#FFA01B", "#41D380"];
                let valueData = [10, 20, 30, 40, 50]; // 柱子的实际数值  
                let percentData = ['10%', '20%', '30%', '40%', '50%']; // 对应的百分比数据
                let option = {
                    color: colorArr,
                    xAxis: {
                        type: 'category',
                        data: ['A', 'B', 'C', 'D', 'E'] // x轴的数据  
                    },
                    yAxis: {
                        type: 'value'
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    series: [{
                        data: valueData.map((value, index) => ({
                            value,
                            percent: percentData[index] // 将百分比数据作为自定义属性  
                        })),
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function(params) {
                                return params.value + ' (' + params.data.percent + ')'; // 在标签中显示数值和百分比  
                            }
                        },
                        tooltip: {
                            formatter: function(params) {
                                return params.name + ': ' + params.value + ' (' + params.data.percent +
                                    ')'; // 在提示框中显示数值和百分比  
                            }
                        }
                    }]
                };
                let myChart = this.$echarts.init(document.getElementById('chartV'));
                myChart.setOption(option);
            },
       //
            fillChartFZV() {
                let res = {
                    "data": [{
                        "klevel": "A1",
                        "perRatioAddUp": "3.46%",
                        "perRatio": "3.46%",
                        "perSum": 3
                    }, {
                        "klevel": "A2",
                        "perRatioAddUp": "4.1%",
                        "perRatio": "3.64%",
                        "perSum": 3
                    }, {
                        "klevel": "A3",
                        "perRatioAddUp": "36.99%",
                        "perRatio": "35.89%",
                        "perSum": 36
                    }, {
                        "klevel": "A4",
                        "perRatioAddUp": "4.63%",
                        "perRatio": "4.64%",
                        "perSum": 4
                    }, {
                        "klevel": "A5",
                        "perRatioAddUp": "5.91%",
                        "perRatio": "3.28%",
                        "perSum": 4
                    }, {
                        "klevel": "A6",
                        "perRatioAddUp": "7.55%",
                        "perRatio": "6.64%",
                        "perSum": 6
                    }, {
                        "klevel": "A7",
                        "perRatioAddUp": "8.37%",
                        "perRatio": "6.82%",
                        "perSum": 7
                    }],
                    "count": "122人"
                }
                const totalCount = res.count;
                console.log('kum返回数据 = ' + JSON.stringify(res));
                let kumArr = [];
                let perSumArr = [];
                let perRatioArr = [];
                let perRatioAddUpArr = [];
                if (res.data) {
                    for (let s of res.data) {
                        kumArr.push(s.klevel);
                        perSumArr.push(s.perSum);
                        perRatioArr.push(s.perRatio);
                        perRatioAddUpArr.push(s.perRatioAddUp);
                    }
                }
                let dom = document.getElementById("chartTwoV");
                let myChart = this.$echarts.init(dom);
                let option;
                let colorArr = ["#4473FF","#41D380"];
                option = {
                    color: colorArr,
                    silent: false, //取消点击高亮
                    title: {
                        text: '总计：' + totalCount,
                        subtext: '',
                        left: 'center',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['数量'],
                        left: 'right'
                    },
                    grid: {
                        left: '2%',
                        right: '20%',
                        bottom: '2%',
                        containLabel: true
                    },
                    yAxis: {
                        name: '人才等级',
                        type: 'category',
                        data: kumArr,
                        axisLabel: {
                            fontSize: 10
                        },
                    },
                    xAxis: {
                        name: '数量',
                        type: 'value',
                        axisLabel: {
                            fontSize: 10
                        },
                    },
                    series: [{
                            name: '数量',
                            type: 'bar',
                            barMaxWidth: 30,
                            stack: 'total',
                            label: {
                                show: true,
                                fontSize: 10,
                                position: "right",
                                formatter: function(params) {
                                    return params.data.perRatio + ' (共' + params.data.perRatioAddUp +
                                        ')'; // 在标签中显示数值和百分比  
                                }
                                // formatter: (params) => "占比" + ((params.value) / 100).toFixed(2) + '%'
                            },
                            data: perSumArr.map((value, index) => ({
                                value,
                                perRatio: perRatioArr[index], // 将百分比数据作为自定义属性  
                                perRatioAddUp: perRatioAddUpArr[index]
                            }))
                        }
                    ]
                };
                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            },
            
        }
    }
</script>
<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .logo {
        height: 340px;
        width: 96vw;
        margin-top: 10rpx;
        margin-left: auto;
        margin-right: auto;
    }
    .text-area {
        display: flex;
        justify-content: center;
        font-size: 36rpx;
        color: blue;
        font-weight: 550;
        height: 32px;
    }
</style>